<script>

export default {
  data() {
    return {
      show: false,
      loading: false,
      row: {},
      nameMap: {},
      descriptionMap: {},
      fileIdOfImageMap: {}
    }
  },
  mounted() {
  },
  methods: {
    open(row) {
      this.clearMap();
      this.row = row;
      this.requestGetByCarouselImageId();
      this.show = true;
    },
    close() {
      this.show = false;
    },
    clearMap() {
      this.nameMap = {};
      this.descriptionMap = {};
      this.fileIdOfImageMap = {};
    },
    requestGetByCarouselImageId(){
      this.loading = true;
      // /business-common-web/carouselImageI18n/getByCarouselImageId
      this.$kt.request.send({
        uri: '/business-common-web/carouselImageI18n/getByCarouselImageId',
        data: {
          carouselImageId: this.row.id
        },
        stateSuccess: (res) => {
          // res.data.forEach(item => {
          //   this.nameMap[item.languageCode] = item.name;
          //   this.descriptionMap[item.languageCode] = item.description;
          //   this.fileIdOfImageMap[item.languageCode] = item.fileIdOfImage;
          // });
          let data = res.data;
          for (let i = 0; i < data.length; i++) {
            this.nameMap[data[i].languageCode] = data[i].name;
            this.descriptionMap[data[i].languageCode] = data[i].description;
            this.fileIdOfImageMap[data[i].languageCode] = data[i].fileIdOfImage;
            console.log(i,"i");
          }
          console.log(this.fileIdOfImageMap,"fileIdOfImageMap");
          this.$forceUpdate();
          this.loading = false;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
        }
      });
    },
    getNameByLanguageCode(languageCode) {
      return this.nameMap[languageCode];
    },
    getDescriptionByLanguageCode(languageCode) {
      return this.descriptionMap[languageCode];
    },
    getFileIdOfImageByLanguageCode(languageCode) {
      return this.fileIdOfImageMap[languageCode];
    },
    clearFileIdImageByLanguageCode(languageCode) {
      return new Promise((resolve, reject) => {
        this.loading = true;

        // /business-common-web/admin/carouselImageI18n/clearFileIdImageByLanguageCode
        this.$kt.request.send({
          uri: '/business-common-web/admin/carouselImageI18n/clearFileIdOfImageByLanguageCodeAndCarouselImageId',
          data: {
            carouselImageId: this.row.id,
            languageCode: languageCode,
          },
          stateSuccess: (res) => {
            this.requestGetByCarouselImageId();
            this.loading = false;

            resolve();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            this.loading = false;

            reject();
          }
        });
        resolve();
      });
    },
    setFileIdOfImageByLanguageCode(languageCode, fileId) {
      return new Promise((resolve, reject) => {
        this.fileIdOfImageMap[languageCode] = fileId;
        // /business-common-web/admin/carouselImageI18n/newSave
        this.$kt.request.send({
          uri: '/business-common-web/admin/carouselImageI18n/newSave',
          data: {
            carouselImageId: this.row.id,
            languageCode: languageCode,
            name: this.getNameByLanguageCode(languageCode),
            description: this.getDescriptionByLanguageCode(languageCode),
            fileIdOfImage: this.getFileIdOfImageByLanguageCode(languageCode)
          },
          stateSuccess: (res) => {
            resolve();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            reject();
          }
        });
        resolve();
      });
    },
    chooseImg(languageCode){
      // 选择文件
      this.$kt.file.chooseImageOne().then(res => {
        this.loading = true;
        // 上传这个文件
        this.$kt.request.uploadFile({
          file: res.file,
          // 这个是文件组编码
          groupCode: "carouselImageI18n",
          stateSuccess: async (res) => {
            await this.setFileIdOfImageByLanguageCode(languageCode,res.data.id);
            this.loading = false;
          },
          stateFail: (res) => {
            this.$message.error(res.errMsg);
            this.loading = false;
          }
        });
      });
    }
  }
}
</script>

<template>
  <el-dialog
      :draggable="true"
      title="轮播图国际化"
      v-model="show"
      v-loading="loading"
      width="85%">
    <el-scrollbar style="height: calc(100vh - 100px);width: 100%;">
      <el-row gutter="20">
        <el-col
            :span="12"
            v-for="(item,index) in $kt.i18n.getSupportLanguage()">
          <el-card style="margin-bottom: 20px"
          >
            <div>
              语言：{{ item.name }} #{{ item.code }}
            </div>
            <div style="height: 20px"></div>
            <div class="img-box">
              <div
                  v-if="getFileIdOfImageByLanguageCode(item.code)"
              class="btn"
                  @click="clearFileIdImageByLanguageCode(item.code)"
              >使用默认图片</div>
              <el-image
                  fit="cover"
                  v-if="getFileIdOfImageByLanguageCode(item.code)"
                  style="width: 100%;height: 200px;border-radius: 10px"
                  :src="$kt.file.visit(getFileIdOfImageByLanguageCode(item.code))"></el-image>
              <div v-else
                   style="width: 100%;height: 200px;border-radius: 10px;background-color: #f5f7fa;display: flex;justify-content: center;align-items: center">
                默认图片
              </div>
              <!-- 遮盖物 -->
              <div
                  @click="chooseImg(item.code,row.id)"
                  class="img-box-overlay">
                <kt-icon
                    icon="el-icon-edit"
                    size="50px"
                    color="#fff"></kt-icon>编辑
              </div>
            </div>
            <div style="height: 20px"></div>

          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>

  </el-dialog>
</template>

<style scoped lang="scss">
.img-box{
  position: relative;
  cursor: pointer;
  color: #666666;

  .btn{
    position: absolute;
    border-radius: 10px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    z-index: 1;
    // 不可选中
    user-select: none;
    background-color: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,.6);
    padding: 5px;
    top: 10px;
    right: 10px;
  }

  .btn:hover{
    opacity: .8;
  }

  .btn:active{
    opacity: .6;
  }

  .img-box-overlay{
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    border-radius: 0 0 10px 10px;
    z-index: 1;
    color: #fff;
    text-align: center;
    bottom: 0;
    padding: 5px;
    box-sizing: border-box;
  }
}

.img-box-overlay:hover{
  background-color: rgba(0,0,0,0.6);
}

.img-box-overlay:active{
  background-color: rgba(0,0,0,0.4);
}




</style>